import React, { useEffect, useState }  from 'react';
import '@antv/s2-react/dist/style.min.css';
import './index.css'
import insertCss from 'insert-css';
import { getPalette, generatePalette, ThemeCfg } from '@antv/s2';
import { SheetComponent } from '@antv/s2-react';
import { s2DataConfig } from '../assets/test-json.js';
import { defaultSortParams } from '../assets/test-json.js';
import { ChromePicker } from 'react-color';
import { Button, Popover, Space } from 'antd';
import 'antd/es/cascader/style/index.css';
insertCss(`
  .antv-s2-advanced-sort-btn.ant-btn svg path {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .antv-s2-advanced-sort-btn.ant-btn:hover svg path, .antv-s2-advanced-sort-btn.ant-btn:focus svg path {
    fill: #873bf4;
  }
  .ant-cascader-menu-item {
    font-size: 12px;
  }
  .ant-col {
    width: 100%;
  }
`);
const Index = () => {
    const [themeColor, setThemeColor] = useState('#EA1720');
    const [dataCfg, setDataCfg] = useState(s2DataConfig);
    const [sortParams, setSortParams] = React.useState(defaultSortParams);
    const [themeCfg, setThemeCfg] = useState({
        name: 'colorful',
    });

    const updatePalette = (newThemeColor) => {
        // 使用内置的 colorful 色板作为参考色板
        console.log('s')
        const palette = getPalette(themeCfg.name);
        // 使用参考色板 & 主题色值生成新色板
        const newPalette = generatePalette({
            ...palette,
            brandColor: newThemeColor,
        });

        // 使用新色板设置主题
        setThemeCfg({
            name: themeCfg.name,
            palette: newPalette,
        });
    };
    const onRowCellHover = ({ event, viewMeta }) => {
        viewMeta.spreadsheet.tooltip.show({
          position: {
            x: event.clientX,
            y: event.clientY,
          },
          content: <CustomRowCellTooltip />,
        });
    };

    useEffect(() => {
        updatePalette(themeColor);
    }, []);
    // 1. 准备数据
    const data = [
        {
            province: "浙江",
            city: "杭州",
            type: "笔",
            price: "1",
        },
        {
            province: "浙江",
            city: "杭州",
            type: "纸张",
            price: "2",
        },
        {
            province: "浙江",
            city: "杭州",
            type: "笔",
            price: "12",
        },
        {
            province: "浙江",
            city: "杭州",
            type: "纸张",
            price: "21",
        },
        {
            province: "浙江",
            city: "杭州",
            type: "笔",
            price: "222",
        },
        {
            province: "浙江",
            city: "杭州",
            type: "纸张",
            price: "2",
        },
        {
            province: "浙江",
            city: "杭州",
            type: "笔",
            price: "102",
        },
        {
            province: "浙江",
            city: "杭州",
            type: "纸张",
            price: "1",
        },
    ];
    
    // 2. 配置数据
    const s2DataCfg = {
        fields: {
            columns: ["province", "city", "type", "price"], // 要展示的列头字段 id 列表
        },
        meta: [
            // 列头字段对应的元信息，比如展示的中文名
            {
                field: "province",
                name: "省份",
            },
            {
                field: "city",
                name: "城市",
            },
            {
                field: "type",
                name: "类型",
            },
            {
                field: "price",
                name: "价格",
            },
        ],
        data,
    };
    
    // 3. 添加配置
    const s2Options = {
        tooltip: {
            // operation: {
            //   trend: true, // 显示趋势图按钮
            //   hiddenColumns: true, //开启隐藏列（叶子节点有效）
            // },
            showTooltip: true,
          },
        width: 600,
        height: 300,
        totals: {
            row: {
                showGrandTotals: true,//是否显示总计
                showSubTotals: true,//是否显示小计。当配置为对象时，always 控制是否在子维度不足 2 个时始终展示小计，默认不展示。
                reverseLayout: true,//总计布局位置，默认下或右
                reverseSubLayout: true,//小计布局位置，默认下或右
                subTotalsDimensions: [ 'province' ],//小计的汇总维度
                calcTotals: {
                    aggregation: 'SUM',
                },
                calcSubTotals: {
                    aggregation: 'SUM',
                },
            },
            col: {
                showGrandTotals: true,
                showSubTotals: true,
                reverseLayout: true,
                reverseSubLayout: true,
                subTotalsDimensions: [ 'type' ],
                calcTotals: {
                    aggregation: 'SUM',
                },
                calcSubTotals: {
                    aggregation: 'SUM',
                },
            },
        },
        showSeriesNumber: false,
        // frozenRowCount: 1, // 行头冻结数量
        // frozenColCount: 1, // 列头冻结数量
        // frozenTrailingRowCount: 1, // 列尾冻结数量
        // frozenTrailingColCount: 1, // 列尾冻结数量
        interaction: {
            hoverHighlight: true,
          },
        // 通过配置 conditions 实现字段标记
        conditions: {
            text: [
                // 行头
                {
                    field: 'city',
                    mapping() {
                    return {
                        // fill 是文本字段标记下唯一必须的字段，用于指定文本颜色
                        fill: '#DB6BCF',
                    };
                    },
                },
                {
                    field: "price",
                    mapping(fieldValue, data) {
                        return {
                            // fill 是文本字段标记下唯一必须的字段，用于指定文本颜色
                            fill: "#5B8FF9",
                        };
                    },
                },
            ],
        },
    };
    return (
        <div>
            <Space direction="vertical">
                <Space>
                    <span>当前主题色: {themeColor}</span>
                    <Popover
                    placement="bottomRight"
                    content={
                        <ChromePicker
                        disableAlpha
                        color={themeColor}
                        onChangeComplete={(color) => {
                            setThemeColor(color.hex);
                            updatePalette(color.hex);
                        }}
                        />
                    }
                    >
                        <Button size="small" style={{ marginLeft: 20 }}>
                            主题色调整
                        </Button>
                    </Popover>
                </Space>
            </Space>
            <SheetComponent
            sheetType="pivot"
            adaptive={false}
            dataCfg={dataCfg}
            themeCfg={themeCfg}//主题
            options={s2Options}
            onMounted={(instance) => {
                // instance.showTooltip = (tooltipOptions) => {
                    // 可自定义这里的 tooltipOptions
                    //自定义显示位置
                    // const { position } = tooltipOptions;
                    // const { data } = tooltipOptions;
                    // instance.tooltip.show({ ...tooltipOptions, position: { x: position.x + 1, y: position.y + 1 } });
                    //自定义展示层数据--名称   当前单元格名称，一般只有单元格中文案被省略才会显示
                    // const name = `${data.name} - 测试`;
                    // instance.tooltip.show({ ...tooltipOptions, data: { ...data, name: data.name ? name : '' } });
                    //自定义展示层数据-- 当前单元格提示信息
                    // const tips = '说明：这是个说明';
                    // instance.tooltip.show({ ...tooltipOptions, data: { ...data, tips } });
                    //自定义展示层数据--所选项统计列表（ summaries ）
                    // const customSummaries = (data.summaries || []).map((item) => {
                    //     return { ...item, name: `${item.name} - 测试` };
                    // });
                    // instance.tooltip.show({ ...tooltipOptions, data: { ...data, summaries: customSummaries } });
                    //自定义展示层数据--轴列表（ headInfo ），在数据单元格中显示 行/列头 名称
                    // const { cols = [], rows = [] } = data.headInfo || {};
                    // const customCols = cols.map(item=> {
                    //     return {...item, value: `${item.value} - 测试`}
                    // });
                    // instance.tooltip.show({
                    //     ...tooltipOptions,
                    //     data: {
                    //         ...data,
                    //         headInfo: { rows, cols: customCols }
                    //     }
                    // });
                    //自定义展示层数据--数据点明细信息（ details ），即当前单元格的数据信息
                    // const customDetails = (data.details || []).map((item) => {
                    //     return { name: `${item.name} - 测试`, value: `${item.value} - w` };
                    // });
                    // instance.tooltip.show({ ...tooltipOptions, data: { ...data, details: customDetails } });
                    //自定义展示层数据--底部提示信息（ infos ），一般可用于快捷键操作提示
                    // const infos = '按住 Cmd/Ctrl 或框选，查看多个数据点';
                    // instance.tooltip.show({ ...tooltipOptions, data: { ...data, infos } });
                    //自定义展示层数据--操作栏（ operator ）
                    // const { options } = tooltipOptions;
                    // const customOperator = {
                    //   onClick: ({ key }) => {
                    //     console.log('任意菜单项点击', key);
                    //   },
                    //   menus: [
                    //     {
                    //       key: 'trend',
                    //       icon: 'trend',
                    //       text: '趋势',
                    //       onClick: () => {
                    //         console.log('当前菜单项点击')
                    //       }
                    //     },
                    //   ],
                    // };
                    // instance.tooltip.show({ ...tooltipOptions, options: { ...options, operator: customOperator } });
                // };
                instance.showTooltip = (tooltipOptions) => {
                    const { position, data = {}, options } = tooltipOptions;
                    const name = `${data.name} - 测试`; // 只有单元格中文案被省略才显示
                    const infos = '按住 Shift 多选或框选，查看多个数据点';
                    const tips = '说明：这是个说明';
                    const customSummaries = (data.summaries || []).map((item) => {
                      return { ...item, name: `${item.name} - 测试` };
                    });
                    const { cols = [], rows = [] } = data.headInfo || {};
                    const customCols = cols.map((item) => {
                      return { ...item, value: `${item.value} - 测试` };
                    });
                    const customDetails = (data.details || []).map((item) => {
                      return {
                        name: `${item.name} - 测试`,
                        value: `${item.value} - w`,
                      };
                    });
                    const customOperator = {
                      onClick: ({ key }) => {
                        console.log('任意菜单项点击', key);
                      },
                      menus: [
                        {
                          id: 'trend',
                          icon: 'trend',
                          text: '趋势',
                          onClick: () => {
                            console.log('当前菜单项点击');
                          },
                        },
                      ],
                    };
                    const customOptions = {
                      ...tooltipOptions,
                      position: { x: position.x + 1, y: position.y + 1 },
                      data: {
                        ...data,
                        name: data.name ? name : '',
                        infos,
                        tips,
                        summaries: customSummaries,
                        headInfo: { rows, cols: customCols },
                        details: customDetails,
                      },
                      options: {
                        ...options,
                        operator: customOperator,
                      },
                    };
                    instance.tooltip.show(customOptions);
                  };
              }}
            // header={{
            //     advancedSortCfg: {
            //       open: true,
            //       sortParams,
            //       onSortConfirm: (ruleValues, sortParams) => {
            //         console.log(ruleValues, sortParams)
            //         setDataCfg({ ...dataCfg, sortParams });
            //         setSortParams(sortParams);
            //       },
            //     },
            //   }}
            />,
        </div>
    );
}
const CustomRowCellTooltip = () => <div>row cell tooltip</div>;

export default Index;
